<template>
    <div id="app">
        <router-view />
        <a-modal width="1200px" :visible="visible" title="APS生产预警" @cancel="modalCancel" class="yuan-modal app-warning-modal"
            :dialog-style="{ top: '20px' }">
            <div class="warning-main">
                <div class="warning-panel">
                    <div class="warning-title">成品库存预警</div>
                    <div class="warning-content">
                        <div class="content-title">当前成品紧急程度</div>
                        <div class="content-box">
                            <div :class="[item.bg == '#FC4A3F' ? ' shine top-list':'top-list']" v-for="item in warningList" :style="`background-color:${item.bg}`">
                                <div class="t-l-top">
                                    <span>品种数量</span>
                                    <span class="t-l-type" :style="`color:${item.bg}`">紧急程度:{{item.title}}</span>
                                </div>
                                <div class="t-l-bottom">
                                    <span>{{item.num || 0}}</span>
                                    <span class="t-l-link" @click="jumpWarning('smartWarning')">
                                        去处理
                                        <span class="iconfont">&#xe775;</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="warning-panel">
                    <div class="warning-title">生产计划预警</div>
                    <div class="warning-content">
                        <div class="content-title">当前执行计划</div>
                        <div class="content-box">
                            <div class="bottom-list" v-for="item in nowPlanList" :style="`background-color:${item.bg}`">
                                <div class="b-l-left">
                                    <div class="b-l-title">{{item.title}}</div>
                                    <div class="b-l-info">
                                        <span>{{item.num || 0}}</span>
                                        <!-- <span class="b-l-link" @click="jumpWarning('productionPlan')">查看</span> -->
                                    </div>
                                </div>
                                <img class="b-l-right" :src="require(`@/assets/img/${item.img}`)" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="warning-content">
                        <div class="content-title">计划详情</div>
                        <div class="content-box">
                            <div class="bottom-list" v-for="item in fenjieList" :style="`background-color:${item.bg}`">
                                <div class="b-l-left">
                                    <div class="b-l-title">{{item.title}}</div>
                                    <div class="b-l-info">
                                        <span>{{item.num || 0}}</span>
                                        <span class="b-l-link" @click="jumpWarning(item.router)">查看</span>
                                    </div>
                                </div>
                                <img class="b-l-right" :src="require(`@/assets/img/${item.img}`)" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <template slot="footer">

                <a-button @click="modalCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>


<script lang="ts">
import { h } from "vue";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import warningApi from "./api/warningApi";
import { UserModule } from "./store/modules/userModules";
import { getStorageUserInfo } from "./utils";

@Component({ name: "TPL" })
export default class index extends Vue {
    loading = false;
    showUpdateTips() {
        this.$notification["warning"]({
            message: "更新提示",
            description: "系统版本已更新，点击按钮刷新页面",
            btn: (h) =>
                h(
                    "a-button",
                    {
                        props: { type: "primary", size: "small" },
                        on: { click: () => location.reload() },
                    },
                    "更新"
                ),
        });
    }
    async getVersion() {
        console.log("v:" + process.env.version);
        // 获取最新的版本号 如果版本过低 提示刷新
        // const res = await getVersion({ skipCount: 0, maxResultCount: 1 })
        // if (res.items && res.items[0]) {
        //     console.info(process.env)
        //     const firstVersion = res.items[0].version
        //     const versionStr = firstVersion.split('-')[1]
        //     if (process.env && process.env.version) {
        //         document.getElementById('app').dataset.version = process.env.version
        //         if (versionStr && versionStr > process.env.version) {
        //             this.showUpdateTips()
        //         }
        //     }
        // }
    }
    async showWarningModal() {
        // 没有登录不执行
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            return;
        }

        const showInfo = JSON.parse(localStorage.getItem("warningTipsInfo") || "{}");
        const showTime = showInfo.showTime;
        const nowTime = new Date().getTime();

        if (!showTime || showTime < nowTime - 600000 || showInfo.showWarningTips === false) {
            const res = await warningApi.getAlarmInfo();
            const data = res.data || { alarmList: [], planList: [] };
            this.warningList = data.alarmList.map((item) => {
                return { title: item.level, num: item.num, bg: this.warningColor[item.level] };
            });
            this.fenjieList = data.planList.map((item) => {
                return {
                    title: item.plan,
                    num: item.num,
                    bg: this.fenjieData[item.plan].bg,
                    img: this.fenjieData[item.plan].img,
                    router: this.fenjieData[item.plan].router,
                };
            });

            this.nowPlanList = [
                { title: "可执行计划总量", num: data.totalPlan, bg: "#FFA842", img: "计划总量.png" },
                { title: "已执行计划量", num: data.todayPlan, bg: "#22B585", img: "已完成计划.png" },
                // { title: "逾期计划量", num: data.overduePlan, bg: "#FC4A3F", img: "逾期计划.png" },
            ];
            localStorage.setItem(
                "warningTipsInfo",
                JSON.stringify({
                    showTime: nowTime,
                    showWarningTips: true,
                })
            );
            this.visible = true;
        }
    }
    async mounted() {
        this.getVersion();
        this.showWarningModal();
    }
    visible = false;
    modalCancel() {
        this.visible = false;
    }
    warningColor = {
        高: "#FC4A3F",
        中: "#FFA842",
        低: "#22B585",
    };
    warningList:any[] = [];
    nowPlanList:any[] = [];
    fenjieData = {
        包装计划: { bg: "#22B585", img: "包装计划.png", router: "packagingPlan" },
        制剂计划: { bg: "#22B585", img: "制剂计划.png", router: "drugPlan" },
        提取计划: { bg: "#22B585", img: "提取计划.png", router: "extractPlan" },
        饮片计划: { bg: "#22B585", img: "饮片计划.png", router: "pillsPlan" },
    };
    fenjieList:any[] = [];
    jumpWarning(name) {
        this.visible = false;
        this.$router.push({ name });
        setTimeout(() => {
            UserModule.setMenuChange(!UserModule.menuChange);
        }, 500);
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss">
.editor {
    z-index: 999999;
    width: 100%;
    min-height: 500px;
    border: 1px solid #8d8d8d;
}

#app {
    height: 100%;
    background-color: rgba(250, 248, 248, 0.98);
}

html {
    margin: 0;
    padding: 0;
}

body {
}

* {
    //box-sizing: border-box;
}

.app-warning-modal {
    .ant-modal-body {
        padding: 0;
    }
    .warning-panel {
        background-color: #fff;
    }
    .warning-title {
        height: 50px;
        line-height: 50px;
        background: #f4f4f4;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0);
        font-weight: bold;
        font-size: 18px;
        color: #282828;
        padding: 0 20px;
    }
    .warning-content {
        padding: 0 20px 20px 20px;
    }
    .content-title {
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.7);
        padding: 10px 0;
    }
    .top-list {
        color: #fff;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 350px;
        height: 120px;
        margin-right: 20px;
        padding: 20px;
        border-radius: 12px;
       
        
    }
    .shine{
        position: relative;
        overflow: hidden;
        &::after {
            content: "";
            position: absolute;
            top: -52px;
            left: -60%;
            width: 10%;
            height: 200%;
            transform: rotate(45deg);
            background: linear-gradient(
                120deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            animation: shine-move 2.5s infinite linear;
            pointer-events: none;
        }

        @keyframes shine-move {
            0% {
                left: -180%;
            }
            100% {
                left: 380%;
            }
        }
    }
    .top-list:last-child {
        margin-right: 0;
    }
    .t-l-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        font-weight: bold;
    }
    .t-l-type {
        background-color: #fff;
        height: 28px;
        line-height: 28px;
        padding: 0 20px;
        border-radius: 32px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
    }
    .t-l-bottom {
        font-weight: bold;
        font-size: 26px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .t-l-link {
        font-size: 16px;
        font-weight: lighter;
        cursor: pointer;
    }

    .bottom-list {
        width: 350px;
        margin-right: 20px;
        display: inline-flex;
        color: #fff;
        border-radius: 12px;
    }
    .bottom-list:nth-child(4) {
        margin-top: 15px;
    }
    .bottom-list:nth-child(3n) {
        margin-right: 0;
    }
    .b-l-left {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 24px;
    }
    .b-l-right {
        width: 110px;
        height: 110px;
    }
    .b-l-title {
        font-size: 18px;
    }
    .b-l-info {
        font-size: 26px;
        font-weight: bold;
        vertical-align: top;
    }
    .b-l-link {
        font-size: 15px;
        font-weight: lighter;
        margin-left: 10px;
        cursor: pointer;
    }
}
</style>
